<script lang="ts">
import { defineComponent } from 'vue';
import MyFirstComponent from './components/MyFirstComponent.vue';
// import MyFirstComponent from './components/MyFirstComponentWithHook.vue';
import StaticMessage from './components/StaticMessage.vue';
import ReversedMessage from './components/ReversedMessage.vue';
import MyComponent from './components/MyComponent.vue';
import MyProductItemList from './components/MyProductItemList.vue';
import ProductItemList from './components/ProductItemList.vue';
import DiningComponent from './components/DiningComponent.vue';
import CafeComponent from './components/CafeComponent.vue';
import HeadingComponent from './components/HeadingComponent.vue';
import UserWatcherComponent from './components/UserWatcherComponent.vue';
import ParentComponent from './components/ParentComponent.vue';
import MyCafeComponent from './components/MyCafeComponent.vue';
import MyHeadingComponent from './components/MyHeadingComponent.vue';

export default defineComponent({
 components: {
    MyFirstComponent,
    StaticMessage,
    ReversedMessage,
    ProductItemList,
    DiningComponent,
    CafeComponent,
    HeadingComponent,
    MyComponent,
    ParentComponent,
    MyProductItemList,
    MyCafeComponent,
    UserWatcherComponent,
    MyHeadingComponent,
}
})
</script>
<template>
  <!-- <my-first-component /> -->
  <!-- <MyFirstComponent /> -->
  <!-- <MyProductItemList /> -->
  <!-- <MyComponent /> -->
  <!-- <MyCafeComponent /> -->
  <!-- <MyHeadingComponent /> -->
  <!-- <UserWatcherComponent /> -->
  <!-- <StaticMessage /> -->
  <!-- <ReversedMessage /> -->
  <!-- <ProductItemList /> -->
  <!-- <ParentComponent /> -->
  <!-- <DiningComponent /> -->
  <!-- <CafeComponent /> -->
  <!-- <section class="wrapper">
    <HeadingComponent />
    <span class="heading">This is a span element in App.vue component</span>
  </section> -->
  <section class="wrapper">
    <MyHeadingComponent />
    <span class="heading">This is a span element in App.vue component</span>
  </section>
 </template>
<style scoped>
.wrapper :deep(p) {
  color: red;
}

</style>
